<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            color: red;
        }

        div {
            color: pink !important;
        }

        span {
            color: blue;
        }



    </style>
</head>
<body>
<!--层叠：指的同级别后面的生效-->
<!--继承：父元素上样式会直接继承到子元素上-->
<!--优先级规则：
  通配符选择器 < 标签选择器 < 类选择器 < id选择器 < ⾏内样式 < !important
  选中标签的范围越⼤ ，优先级越低
  判断规则：
    1.看是否有继承：只要有继承优先级最低
    2.看是否有!important： 只要有优先级最高
    3.从左向右依次⽐较选择器个数 ， 同⼀级个数多的优先级⾼ ， 如果个数相同 ，则向后⽐较
-->

<div class="div1">
    <span>span1</span>
    <p>
        <span>span2</span>
    </p>
</div>
</body>
</html>